import 'package:flutter/material.dart';
import 'package:flutter_changdian_football/pages/match/recharge_payment/recharge_payment_controller.dart';
import 'package:flutter_changdian_football/pages/mine/my_purse/recharge/recharge_controller.dart';
import 'package:flutter_changdian_football/routers/app_routes.dart';
import 'package:flutter_changdian_football/utils/custom_logger.dart';
import 'package:flutter_changdian_football/widget/custom_button.dart';
import 'package:flutter_changdian_football/widget/screenutil/custom_screenutil.dart';
import 'package:flutter_changdian_football/widget/toast/custom_toast.dart';
import 'package:get/get.dart';

/// 充值/缴费
class RechargePaymentPage extends StatelessWidget {
  const RechargePaymentPage({super.key, required this.matchId});

  final String matchId;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF8FAF9),
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: const Color(0xffF8FAF9),
        elevation: 0,
        title: Text(
          '充值/缴费',
          style: TextStyle(fontSize: 16.sp, color: const Color(0xff333333)),
        ),
        iconTheme: const IconThemeData(
          color: Color(0xff333333)
        ),
      ),
      body: GetBuilder<RechargePaymentController>(
        init: RechargePaymentController(matchId: matchId),
        builder: (rechargePaymentController) {
          return Column(
            children: [
              Expanded(
                child: SingleChildScrollView(
                  padding: EdgeInsets.symmetric(horizontal: 17.w),
                  child: Column(
                    children: [
                      SizedBox(height: 15.w,),

                      Container(
                        padding: EdgeInsets.symmetric(vertical: 20.w),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(8.r)
                        ),
                        width: double.infinity,
                        child: Column(
                          children: [
                            SizedBox(
                              child: Text('报名场地费(元)', style: TextStyle(fontSize: 14.sp, color: const Color(0xff545454)),),
                            ),

                            SizedBox(height: 8.w,),

                            SizedBox(
                              child: Text(rechargePaymentController.venueFees, style: TextStyle(fontSize: 30.sp, color: const Color(0xff499360), fontWeight: FontWeight.w500),),
                            ),

                            SizedBox(height: 30.w,),

                            Container(
                              width: double.infinity,
                              height: 1.w,
                              color: const Color(0xffD9D9D9),
                            ),

                            SizedBox(height: 16.w,),

                            Container(
                              padding: EdgeInsets.symmetric(horizontal: 15.w),
                              width: double.infinity,
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(
                                    child: Text('请选择支付方式', style: TextStyle(fontSize: 14.sp, color: const Color(0xff666666)),),
                                  ),

                                  SizedBox(height: 10.w,),

                                  _payTypeWidget(icon: 'assets/images/ic_ye.png', text: '余额(元): ${rechargePaymentController.userBalance}', isSelect: rechargePaymentController.payType == '0', onTap: () {
                                    rechargePaymentController.changePayType('0');
                                  }),

                                  SizedBox(height: 10.w,),

                                  _payTypeWidget(icon: 'assets/images/zfb.png', text: '支付宝', isSelect: rechargePaymentController.payType == '1', onTap: () {
                                    rechargePaymentController.changePayType('1');
                                  }),
                                ],
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              ),

              Container(
                padding: EdgeInsets.symmetric(horizontal: 17.w, vertical: 20.w),
                child: CustomButton(
                  text: '确定',
                  onTap: () {
                    rechargePaymentController.payment();
                  },
                ),
              )
            ],
          );
        }
      ),
    );
  }

  _payTypeWidget({
    String? icon,
    String? text,
    bool isSelect = false,
    Function? onTap
  }) {
    return GestureDetector(
      behavior: HitTestBehavior.translucent,
      onTap: () {
        onTap?.call();
      },
      child: Container(
        decoration: BoxDecoration(
          color: const Color(0xffF9F9F9),
          borderRadius: BorderRadius.circular(10.r)
        ),
        padding: EdgeInsets.symmetric(vertical: 10.w, horizontal: 15.w),
        child: Row(
          children: [
            SizedBox(
              width: 24.w,
              height: 24.w,
              child: Image.asset(icon ?? '', fit: BoxFit.fill,),
            ),
    
            SizedBox(width: 9.w,),
    
            Expanded(
              child: SizedBox(
                child: Text(text ?? '', style: TextStyle(fontSize: 15.sp, fontWeight: FontWeight.w500, color: const Color(0xff555555)),),
              ),
            ),
    
            Container(
              width: 16.w,
              height: 16.w,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(2.r),
                color: isSelect == true ? const Color(0xff499360) : Colors.transparent,
                border: Border.all(width: 1.w, color: isSelect == true ? const Color(0xff499360) : const Color(0xffC1C1C1))
              ),
              alignment: Alignment.center,
              child: isSelect == true ? Icon(Icons.check, color: Colors.white, size: 10.w,) : const SizedBox(),
            )
          ],
        ),
      ),
    );
  }

}